<script>
let reportoldComponent = {
    template: `
<div style="width: 100%">
    <el-tabs class="tallyStatTabs" value="stat-monthy" @tab-click="handleStatTabClick">
        <el-tab-pane name="stat-monthy">
            <span slot="label"><i class="el-icon-date"></i> 年度统计</span>
        <el-form :inline="true" v-model="statMonthForm" class="form-inline statStoreForm">
        <el-form-item size="mini">
        <el-date-picker class="datePicker" type="month"
        value-format="yyyy-MM" placeholder="起始月份"
        v-model="statMonthForm.begin_date"></el-date-picker>
        ~
        <el-date-picker class="datePicker" type="month"
        value-format="yyyy-MM" placeholder="截止月份"
        v-model="statMonthForm.end_date"></el-date-picker>
        </el-form-item>
        <el-button type="primary" size="mini" @click="setMonthyGraph()"><i class="el-icon-search" /> 检索</el-button>
        </el-form>
        <el-row>
        <p style="text-align: center;cursor: pointer">
        <el-button type="primary" size="small" round @click="monthChartType='column';setMonthyGraph()">柱状图</el-button>
        <el-button type="success" size="small" round @click="monthChartType='line';setMonthyGraph()">折线图</el-button>
        </p>
        </el-row>
        <el-row>
        <el-col :span="24" style="padding:10px 20px;">
        <div id="statMonthy" class="statBox"></div>
        </el-col>
        </el-row>
        </el-tab-pane>

        <el-tab-pane name="stat-daily">
        <span slot="label"><i class="el-icon-date"></i> 日常收支报表</span>
        <!--搜索筛选框------>
        <el-form :inline="true" v-model="statDailyForm" class="form-inline statDailyForm">
        <el-form-item size="mini">
        <el-select placeholder="全部分类" clearable filterable default-first-option v-model="statDailyForm.category_ids" filterable multiple >
        <el-option-group
        v-for="cate in categoryList"
        :key="cate.title"
        :label="cate.title">
        <el-option
        v-for="item in cate.children"
        :key="item.id"
        :label="item.title"
        :value="item.id">
        </el-option>
        </el-option-group>
        </el-select>
        </el-form-item>
        <el-form-item size="mini">
        <el-select placeholder="全部账户" clearable filterable default-first-option v-model="statDailyForm.account_ids" multiple filterable @click.native="getAccountList()">
        <el-option
        v-for="item in accountList"
        :key="item.id"
        :label="item.title"
        :value="item.id">
        </el-option>
        </el-select>
        </el-form-item>
        <el-form-item size="mini">
        <el-select placeholder="客户/供应商" clearable filterable default-first-option v-model="statDailyForm.store_ids" multiple filterable>
        <el-option-group
        v-for="cate in storeList"
        :key="cate.title"
        :label="cate.title">
        <el-option
        v-for="item in cate.children"
        :key="item.id"
        :label="item.title"
        :value="item.id">
        </el-option>
        </el-option-group>
        </el-select>
        </el-form-item>
        <el-form-item size="mini">
        <el-select  placeholder="项目" clearable filterable default-first-option v-model="statDailyForm.project_ids" multiple filterable @click.native="getProjectList()">
        <el-option
        v-for="item in projectList"
        :key="item.id"
        :label="item.title"
        :value="item.id">
        </el-option>
        </el-select>
        </el-form-item>
        <el-form-item size="mini">
        <el-select  placeholder="员工" clearable filterable default-first-option v-model="statDailyForm.member_ids" multiple filterable @click.native="getMemberList()">
        <el-option
        v-for="item in memberList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        </el-option>
        </el-select>
        </el-form-item>
        <el-form-item size="mini">
        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statDailyForm.begin_date"></el-date-picker>
        ~
        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statDailyForm.end_date"></el-date-picker>
        </el-form-item>
        <el-button type="primary" size="mini" @click="setDailyGraph()"><i class="el-icon-search" /> 检索</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="primary" size="mini" @click="setDailyGraph(1)">全部</el-button>
        </el-form>

        <div class="recordStatRight">
            总收入：
            <span class="orange number" id="ft-payout">+{{ dailySummary.in }}</span>
            <el-divider direction="vertical"></el-divider>
            总支出：
            <span class="green number" id="ft-payout">-{{ dailySummary.out }}</span>
            <el-divider direction="vertical"></el-divider>
            利润：
            <span class="blue number" id="ft-payout">{{ dailySummary.debt }}</span>
        </div>

        <!--柱状堆积图------>
        <div id="statDailyIn" class="statBox"></div>
        <el-table class="statTable"
        :data="statDailyInData" show-summary border>
        <el-table-column
        prop="parent_name"
        label="一级分类">
        </el-table-column>
        <el-table-column
        prop="name"
        label="二级分类">
        </el-table-column>
        <el-table-column
        prop="amount"
        label="金额" sortable>
        </el-table-column>
        </el-table>
        <div id="statDailyOut" class="statBox"></div>
        <el-table class="statTable"
        :data="statDailyOutData" show-summary border>
        <el-table-column
        prop="parent_name"
        label="一级分类">
        </el-table-column>
        <el-table-column
        prop="name"
        label="二级分类">
        </el-table-column>
        <el-table-column
        prop="amount"
        label="金额" sortable>
        </el-table-column>
        </el-table>
        </el-tab-pane>
        <el-tab-pane name="stat-trend" v-if="false">
        <span slot="label"><i class="el-icon-date"></i> 收支趋势图</span>
        收支趋势图
        </el-tab-pane>
        <el-tab-pane name="stat-member">
        <span slot="label"><i class="el-icon-date"></i> 成员收支表</span>
        <!--搜索筛选框------>
        <el-form :inline="true" v-model="statMemberForm" class="form-inline statMemberForm">
        <el-form-item size="mini">
        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statMemberForm.begin_date"></el-date-picker>
        ~
        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statMemberForm.end_date"></el-date-picker>
        </el-form-item>
        <el-button type="primary" size="mini" @click="setMemberGraph()"><i class="el-icon-search" /> 检索</el-button>
        </el-form>
        <el-row>
        <el-col :span="12" style="padding:10px 20px;">
        <!--收入柱状图------>
        <div id="statMemberIn" class="statBox"></div>
        <el-table class="statTable"
        :data="statMemberInData" show-summary border>
        <el-table-column
        prop="name"
        label="成员">
        </el-table-column>
        <el-table-column
        prop="total"
        label="金额" sortable>
        </el-table-column>
        </el-table>
        </el-col>
        <el-col :span="12" style="padding:10px 20px;">
        <!--收入柱状图------>
        <div id="statMemberOut" class="statBox"></div>
        <el-table class="statTable"
        :data="statMemberOutData" show-summary border>
        <el-table-column
        prop="name"
        label="成员">
        </el-table-column>
        <el-table-column
        prop="total"
        label="金额" sortable>
        </el-table-column>
        </el-table>
        </el-col>
        </el-row>
        </el-tab-pane>
        <el-tab-pane name="stat-store">
        <span slot="label"><i class="el-icon-date"></i> 商家支出表</span>
        <!--搜索筛选框------>
        <el-form :inline="true" v-model="statStoreForm" class="form-inline statStoreForm">
        <el-form-item size="mini">
        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statStoreForm.begin_date"></el-date-picker>
        ~
        <el-date-picker class="datePicker" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="statStoreForm.end_date"></el-date-picker>
        </el-form-item>
        <el-button type="primary" size="mini" @click="setStoreGraph()"><i class="el-icon-search" /> 检索</el-button>
        </el-form>
        <el-row>
        <el-col :span="12" style="padding:10px 20px;">
        <div id="statStoreOut" class="statBox"></div>
        </el-col>
        <el-col :span="12" style="padding:10px 20px;">
        <!--收入柱状图------>
        <div id="statStoreOut" class="statBox"></div>
        <el-table class="statTable"
        :data="statStoreOutData" show-summary border>
        <el-table-column
        prop="name"
        label="商家">
        </el-table-column>
        <el-table-column
        prop="total"
        label="金额" sortable>
        </el-table-column>
        </el-table>
        </el-col>
        </el-row>
        </el-tab-pane>
        </el-tabs>
</div>
    `,
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },
        categoryListIn() {
            return this.$store.state.categoryListIn
        },
        categoryListOut() {
            return this.$store.state.categoryListOut
        },
        categoryList() {
           return this.categoryListIn.concat(this.categoryListOut)
           // return  this.categoryListOut
        },
        accountList() {
            return this.$store.state.accountList
        },
        projectList() {
            return this.$store.state.projectList
        },
        memberList() {
            return this.$store.state.memberList
        },
        customList () {
            return this.$store.state.customList
        },
        gysList () {
            return this.$store.state.gysList
        },
        storeList() {
            return this.customList
            // return this.gysList
        },
    },
    data:function(){
        return {
            monthChartType:'column',
            statType:'stat-monthy',
            statDailyForm:{
                begin_date : monthBeginDate,
                end_date : monthEndDate,
            },
            statMemberForm:{
                begin_date : monthBeginDate,
                end_date : monthEndDate,
            },
            statStoreForm:{
                begin_date : monthBeginDate,
                end_date : monthEndDate,
            },
            statMonthForm:{},
            statDailyInData:[],
            statDailyOutData:[],
            statMemberInData:[],
            statMemberOutData:[],
            statStoreInData:[],
            statStoreOutData:[],
            dailySummary:{},
        }
    },
    mounted(){
        this.setStatGraph()
    },
    methods:{
        handleStatTabClick(tab){
            if(tab.name !== this.statType){
                this.statType = tab.name;
                this.setStatGraph()
            }
        },
        setStatGraph(){
            if(this.statType === 'stat-daily') {
                this.setDailyGraph()
            }else if(this.statType === 'stat-member') {
                this.setMemberGraph()
            }else if(this.statType === 'stat-store') {
                this.setStoreGraph()
            }else if(this.statType === 'stat-monthy') {
                this.setMonthyGraph()
            }
        },
        setMonthyGraph(){
            let that = this
            axios.post('/api/stat/monthy?tally_id='+that.currentTallyId,this.statMonthForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    let monthyCates = [] ;
                    let monthyInChartData = [] ;
                    let monthyOutChartData = [] ;
                    let monthyProChartData = [] ;
                    // 表格展示 收入
                    res.data.data.forEach(v=>{
                        monthyCates.push(v.date);
                        monthyInChartData.push(v.data.in);
                        monthyOutChartData.push(v.data.out);
                        monthyProChartData.push(v.data.pro);
                    });
                    let statMonthyData = {
                        dataCategory: monthyCates,
                        datas: [{
                            name: '收入',
                            data: monthyInChartData
                        }, {
                            name: '支出',
                            data: monthyOutChartData
                        }, {
                            name: '利润',
                            data: monthyProChartData
                        }],
                    };

                    // 渲染统计图表
                    // console.log(that.monthChartType)
                    renderMonthy('statMonthy',statMonthyData,that.monthChartType)
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        setDailyGraph(isAll=0){
            let that = this
            that.statDailyInData=[]
            that.statDailyOutData=[]
            if(isAll === 1){
                this.statDailyForm = {}
            }
            axios.post('/api/stat/daily?tally_id='+that.currentTallyId,this.statDailyForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    if(res.data.data.inlst.length < 1) {
                        // that.showTips('warning','暂无收入记录')
                    }
                    if(res.data.data.outlist.length < 1) {
                        // that.showTips('warning','暂无支出记录')
                    }
                    // 表格展示 收入
                    res.data.data.inlst.forEach(v=>{
                        if(v.c.length > 0) {
                            v.c.forEach(v2 => {
                                v2.parent_name = v.name
                                that.statDailyInData.push(v2)
                            })
                        }
                    });
                    // 表格展示 支出
                    res.data.data.outlist.forEach(v=>{
                        if(v.c.length > 0) {
                            v.c.forEach(v2 => {
                                v2.parent_name = v.name
                                that.statDailyOutData.push(v2)
                            })
                        }
                    });
                    // 统计
                    that.dailySummary = {
                        'in': res.data.data['inAmount'],
                        'out': res.data.data['outAmount'],
                        'debt': res.data.data['debtAmount'],
                    }
                    // 渲染统计图表
                    genDailyGraphFromData(res.data.data)
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        setMemberGraph(isAll){
            let that = this
            that.statMemberInData=[]
            that.statMemberOutData=[]
            if(isAll === 1){
                this.statMemberForm = {}
            }
            axios.post('/api/stat/member?tally_id='+that.currentTallyId,this.statMemberForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    if(res.data.data.inlst.length < 1) {
                        that.$message({
                            type: 'error',
                            message: '暂无收入记录'
                        })
                    }
                    if(res.data.data.outlist.length < 1) {
                        that.$message({
                            type: 'error',
                            message: '暂无支出记录'
                        })
                    }
                    // 表格展示 收入 支出
                    that.statMemberInData = res.data.data.inlst
                    that.statMemberOutData = res.data.data.outlist
                    // 渲染统计图表
                    genMemberGraphFromData(res.data.data)
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        setStoreGraph(isAll){
            let that = this
            that.statStoreInData=[]
            that.statStoreOutData=[]
            if(isAll === 1){
                this.statStoreForm = {}
            }
            axios.post('/api/stat/store?tally_id='+that.currentTallyId,this.statStoreForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    if(res.data.data.outlist.length < 1) {
                        // that.showTips('warning','暂无支出记录')
                    }
                    // 表格展示 收入 支出
                    that.statStoreOutData = res.data.data.outlist
                    // 渲染统计图表
                    genStoreGraphFromData(res.data.data)
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
    }
}
</script>
